
<template>
  <h1>mapState映射的数据</h1>
  <h2>年龄: {{age}}</h2>
  <h3>等级: {{level}}</h3>
  <h3>账号: {{user_account}}</h3>
  <h3>昵称: {{user_nickname}}</h3>
  <hr>
  <h1>mapWritableState映射的数据</h1>
  <h3>账号: {{account}}</h3>
  <h3>昵称: {{nickname}}</h3>
  <h2>年龄: {{user_age}}</h2>
  <h3>等级: {{user_level}}</h3>
  <button @click="nickname += '大大'">点修改昵称</button>
  <button @click="account += '1111'">点修改账号</button>
  <button @click="user_age += 2">点修改年龄</button>
  <button @click="user_level += '1'">点修改等级</button>
</template>
<script >
import { mapState,mapWritableState } from 'pinia'
import { useUserStore } from "../stores/useUserStore";

export default {
  computed:{
    // 属性时只读的不能修改
    // 1.0 数组形式
      ...mapState(useUserStore,['age','level']),
    // 2.0 对象形式  别名
    ...mapState(useUserStore,{
      user_account: 'account',
      user_nickname: 'nickname',
    }),
    // 3.0 数组形式
    ...mapWritableState(useUserStore,['account','nickname']),
    // 4.0 对象形式  别名
    ...mapWritableState(useUserStore,{
      user_age:'age',
      user_level:'level'
    })
  }
}

</script>
